<template>
    <div id="app">
        <!-- <p class="headp"><span class="headspan">推荐</span> <span>想看</span> <span>关注</span></p> -->






        <van-sticky offset-top="0.4rem" class="headp"  >
           <van-button type="info"><span class="headspan">推荐</span> <span>想看</span> <span>关注</span></van-button>
        </van-sticky>










<div class="flex">
  <section>
      <figure class="figure" v-for="(recom,index) in Recom" :key="index">
              <img :src="recom.img" alt="" class="img">
              <figcaption class="tion1">
                    <span class="leftspan"> 《  {{recom.yl4}} 》  </span>
                    <!-- <span class="rightspan">《《浮士德》》</span> -->
                    <!-- <span class="rightspan">{{recom.yl3}}</span> -->

                </figcaption>
                 <figcaption class="tion2">
                   <span class="centerspan">
                     <span>
          {{recom.text}}
                     </span>
                         
                          <!-- text -->
                   </span>
                   
                   </figcaption>
                 <!-- <figcaption class="tion3">
                   <p class="leftp">
                     <img src="../../public/img/1.jpg" alt="">
                     <span class="centerspan">叶贝贝也</span>
                    </p>
                    <p class="rightp">9.3万</p> -->
                 <!-- </figcaption> -->

          </figure>





  <!-- <figure class="figure">
              <img src="../../public/img/1.jpg" alt="" class="img">
              <figcaption class="tion1">
                    <span class="leftspan">话剧</span>
                    <span class="rightspan">《《浮士德》》</span>
                </figcaption>
                 <figcaption class="tion2">
                   <span class="centerspan">
                          往后余生，洗衣是你做饭也是你
                   </span>
                   
                   </figcaption>
                 <figcaption class="tion3">
                   <p class="leftp">
                     <img src="../../public/img/1.jpg" alt="">
                     <span class="centerspan">叶贝贝也</span>
                    </p>
                    <p class="rightp">9.3万</p>
                 </figcaption>

          </figure>
  -->

  </section>







    </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Swater",
  data() {
    return {
      Recom: []
      //  container: "0.4rem",
    };
  },

  created() {
    axios({
      url: "/recom",
      params: {
        // type: "hot"
      }
    }).then(res => (this.Recom = res.data));
    // console.log("this.Recom", this.Recom[0].id);
  },
  // methods:{
  //   bb(){
  //     "scrollTop"="2rem", 
  //     "isFixed"= true,
  //   },
  // fn(){
  //   bb()
  // }


  // }
};
</script>

<style scoped>
#app {
  width: 96%;
  margin: 0rem 2%;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;

  /* background-color: red; */
}
.headp {
  background-color: #fff;
  height: 0.35rem;
  /* width: 1005；; */
}
.van-button {
  background: #fff;
  border: none;
  /* font-size: 2rem; */
}
.van-button span {
  font-size: 0.15rem;
}

.headp span {
  display: inline-block;
  margin-right: 0.1rem;
  font-size: 0.15rem;
  color: #666;
  line-height: 0.3rem；;
}
.headp .headspan {
  font-size: 0.15rem;
  font-weight: bold;
  color: black;
  border-bottom: 2px solid hotpink;
  line-height: 0.3rem;
}
.flex {
  height: 100%;
  overflow: auto;
  flex: 1;
  background-color: beige;
}

section {
  columns: 2;
  margin: 0.1rem 0.05rem;
}
.figure {
  /* border: 1px solid #438bac; */
  margin-bottom: 0.1rem;
  break-inside: avoid;
  background-color: bisque;

}
/* 懒加载 */
.img {
  width: 100%;
  height: 100%;
}
figcaption {
  /* color: red; */
  font-size: 0.01rem;
  text-align: center;
}
.tion1 {
  margin-top: 0.1rem;
  padding: 0.05rem 0rem;
  background-color: bisque;
}
.tion1 .leftspan {
  color: #888;
  font-size: 0.15rem;
}
.tion1 .rightspan {
  color: #888;
}
.tion2 {
  height: 0.4rem;
  overflow: hidden;
    text-overflow:ellipsis ;
      background-color: bisque;


}
.tion2 .centerspan {
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.15rem;
  text-overflow:ellipsis ;
}
.tion2 .centerspan span {
  font-size: 0.15rem;
 text-overflow: -o-ellipsis-lastline;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* line-clamp: 2; */
  -webkit-box-orient: vertical;
}

.tion3 {
  height: 0.4rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* margin: 0.1rem 0rem; */
}
.tion3 img {
  float: left;
}
.tion3 img {
  height: 0.3rem;
  width: 0.3rem;
  border-radius: 50%;
}
.tion3 .centerspan {
  line-height: 0.3rem;
}
.tion3 .rightp {
  height: 0.3rem;
  width: 0.3rem;
  line-height: 0.3rem;
  float: right;
}
van-sticky{
  width: 100%;
}
</style>
